<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-touch-fullscreen" content="yes" />
		<meta name="format-detection" content="telephone=no"/>
		<meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
		<meta name="msapplication-tap-highlight" content="no" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width, viewport-fit=cover" />
		<title>启蒙优选-我的团队</title>
		<link rel="stylesheet" href="__TMPL__/home/public/assets/css/style.css" />
	</head>
	<style>
		.inviteFriendMask{position: fixed;width:100%;height:100%;top:0;left:0;z-index: 9;background:rgba(0,0,0,.4);display: none;}
		.inviteFriendMask .inviteFriendBox{width:11.36rem;height:20rem;overflow: hidden;background:transparent;position: fixed;left:0;right:0;bottom:0;top:0;margin:auto;margin-top:1rem;}
		/*.friendBoxContent{width:11.36rem;height:20.2rem;overflow: hidden;background: #fff;position: relative;}*/
		.inviteFriendMask .inviteFriendBox #backgroundImg{width:100%;height:100%;position: absolute;left:0;top:0;}
		.inviteFriendMask .inviteFriendBox .userInfo{position: absolute;bottom:.5rem;left:4%;width:92%;height:4.38rem;border-radius: .5rem;background:#F5F5F5;padding:.47rem .4rem;}
		.inviteFriendMask .inviteFriendBox .userInfo .left img{width:1.81rem;height:1.81rem;border-radius: 50%;margin-right:.4rem;}
		.inviteFriendMask .inviteFriendBox .userInfo .left h3{font-size:.72rem;font-weight: 500;color:#333;}
		.inviteFriendMask .inviteFriendBox .userInfo .left p{font-size:.5rem;color:#333;}
		.inviteFriendMask .inviteFriendBox .userInfo .right img{min-width:3.45rem;max-width:3.45rem;height:3.45rem;border-radius:.3rem;margin-left: .4rem;}
		.inviteFriendMask .shareBox{width:11.36rem;text-align: center;font-size:.45rem;color:#CECECE;position: relative;margin:0 auto;top:80%;}
		.inviteFriendMask .shareBox img{width:1.81rem;height:1.81rem;border-radius: 50%;margin-bottom: .5rem;}

		.moreList{text-align: center;font-size:.72rem;color:#666;line-height:2.5rem;display: none;}
	</style>
	<body>
		<!-- 我的团队 --> 
		<div class="teamIndex">
			<div class="promotionBg"></div>
			<div class="content">
				<div class="userBox">
					<div class="number">
						<h3>{$team_count}<i>人</i></h3>
						<p>团队人数</p>
					</div>
					
					<if condition="$parent_meminfo neq ''">
						<!-- 有邀请人 -->
						<div class="user_info flex juscbtween">
							<div class="left flex alitemCenter">
								<img src="{$parent_meminfo.logo}" alt="">
								<div class="user_aname">
									<div class="name ellipsis" style="max-width:8rem">我的邀请人：{$parent_meminfo.nickname}</div>
									<p>累计收益{$parent_meminfo.award_count}元</p>
								</div>
							</div>
							<a href="javascript:;" class="flex alitemCenter contactFriend" data-id="{$parent_meminfo.member_id}"><span>联系TA</span><img src="__TMPL__/home/public/assets/img/right_jin.png" alt=""></a>
						</div>
					<else />
						<!-- 无邀请人 -->
						<div class="user_info flex juscbtween">
							<div class="left flex alitemCenter">
								<img src="__TMPL__/home/public/assets/img/head.png" alt="">
								<div class="user_aname">
									<div class="name">未绑定邀请人</div>
								</div>
							</div>
							<a href="javascript:;" class="flex alitemCenter gobindButton"><span>去绑定</span><img src="__TMPL__/home/public/assets/img/right_jin.png" alt=""></a>
						</div>
					</if>
					
					
				</div>
				<div class="team_tab flex juscenter">
					<div class="tab_item <if condition='$type eq 1'>on</if>"><a href="/my_team?type=1">直属（{$count_list[0]}）</a></div>
					<div class="tab_item <if condition='$type eq 2'>on</if>"><a href="/my_team?type=2">扩散（{$count_list[1]}）</a></div>
					<div class="tab_item <if condition='$type eq 3'>on</if>"><a href="/my_team?type=3">访客（{$count_list[2]}）</a></div>
				</div>
				<!-- 团队列表 -->
				<div class="team_list">
					<div class="thisList">
						<foreach name="list" item="vo">
							<div class="team_item flex juscbtween">
								<div class="left flex alitemCenter">
									<img src="{$vo.logo}" alt="">
									<div class="user_aname">
										<div class="name"><i>{$vo.nickname}</i>
											<span>
											<if condition="$vo.grade eq 1">
												普通用户
											<elseif condition="$vo.grade eq 2"/>
												顾问
											<elseif condition="$vo.grade eq 3"/>
												星级顾问
											<elseif condition="$vo.grade eq 4"/>
												联合创始人
											</if>
											</span>
										</div>
										<p>{$vo.add_time}</p>
									</div>
								</div>
								<a href="javascript:;" class="flex alitemCenter contactFriend" data-id="{$vo.member_id}"><span>联系TA</span><img src="__TMPL__/home/public/assets/img/right.png" alt=""></a>
							</div>
						</foreach>
					</div>
					<php>
					  $counts = count($list);
					  if($counts <= 0){
					</php>
						<div class="noHaveData">
							<img src="__TMPL__/home/public/assets/img/noHaveOrder.png" alt="">
							<p>暂无数据</p>
						</div>
					<php>}</php>
					<div class="moreList">正在加载</div>
				</div>
				<!-- 绑定邀请人弹框 -->
				<div class="bindInvitionMask close">
					<div class="bindInvitionBox bubbling">
						<div class="bindTitle">绑定邀请人</div>
						<div class="bindInput">
							<input type="text" placeholder="请输入邀请码" id="invitionNumber" />
						</div>
						<div class="bindUser">
							<div class="hide flex alitemCenter userInfo">
								<img src="__TMPL__/home/public/assets/img/head.jpeg" alt="" class="shareImg">
								<div class="bindInfo">
									<p class="shareName">君</p>
									<span>邀请你加入启蒙优选</span>
								</div>
							</div>
						</div>
						<div class="bindButton cur">查询邀请人</div>
						<img src="__TMPL__/home/public/assets/img/close.png" class="close" alt="">
					</div>
				</div>
				<!-- 联系弹框 -->
				<div class="contactMask close">
					<div class="contactBox bubbling">
						<div class="user_info">
							<img src="__TMPL__/home/public/assets/img/head.jpeg" alt="" class="head userLogoImg">
							<div class="user_member">
								<span class="user_lever">普通会员</span>
								<h3 class="userName" style="padding:.2rem 0;"></h3>
								<p>微信号：<i id="_order_umber"></i> <img src="__TMPL__/home/public/assets/img/copy.png" alt="" id="copyOrderNum"></p>
							</div>
						</div>
						<div class="contactMoney">
							<div class="flex juscbtween">
								<div class="item">
									<p>本月预估收益</p>
									<h3><i>￥</i><b class="month_prift">0</b></h3>
								</div>
								<div class="item">
									<p>累计预估收益</p>
									<h3><i>￥</i><b class="month_all_prift">0</b></h3>
								</div>
							</div>
							<div class="flex juscbtween">
								<div class="item">
									<p>本月团队新增</p>
									<h3><b class="month_invite_prift">0</b></h3>
								</div>
								<div class="item">
									<p>累计团队人数</p>
									<h3><b class="invite_all_prift">0</b></h3>
								</div>
							</div>
						</div>
						<div class="time"><i class="register_time"></i> 注册</div>
						<img src="__TMPL__/home/public/assets/img/close.png" class="close" alt="">
					</div>
				</div>
			</div>
			<!-- <div class="hide">
				<div class="friendBoxContent" id="friendBoxContent">
				</div>
			</div> -->
		</div>
	</body>
	<script rel="stylesheet" src="__TMPL__/home/public/assets/js/jquery-2.0.3.min.js"></script>
	<script rel="stylesheet" src="__TMPL__/home/public/assets/js/layer/layer.js"></script>
	<script rel="stylesheet" src="__TMPL__/home/public/assets/js/html2canvas.js"></script>
  	<script rel="stylesheet" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
  	<script rel="stylesheet" src="__TMPL__/home/public/assets/js/base.js"></script>
	<script>
		$(function(){
			//显示绑定弹框
			$('.gobindButton').click(function(){
				$('.bindInvitionMask').show();
			})


			//隐藏所有弹框
			$('.close').click(function(){
				// $('#userHead').attr('src',headImg);
				$('.bindInvitionMask').hide();
				$('.contactMask').hide();
			})

			//冒泡，禁止点击
			$('.bubbling').click(function(){
				return false;
			})
		    // 字符长度限制
		    function characterLength(v, n){
		        if(v){
		            const len = v.length;
		            return len > n ? v.substr(0, n) + '...' : v
		        }else{
		            return v;
		        }
		    }

			//显示联系弹框
			$('body').on('click','.contactFriend',function(){
				var id = $(this).attr('data-id');
				$.ajax({
					url: '/ckeck_user',
					type: 'POST',
					data: {user_id: id},
				})
				.done(function(res) {
					if(res.code == 200){
						var data = res.data;
						$('.userLogoImg').attr('src',data.info.logo);
						var lever = data.info.grade==2?'顾问':data.info.grade==3?'星级顾问':data.info.grade==4?'联合创始人':'普通会员';
						$('.user_lever').html(lever);
						$('.userName').html(data.info.nickname);
						if(data.info.wx_number != ''){
							$('#_order_umber').html(data.info.wx_number);
						}else{
							$('#_order_umber').html('未设置');
							$('#copyOrderNum').hide();
						}
						$('.month_prift').html(data.month);
						$('.month_all_prift').html(data.month_all);
						$('.month_invite_prift').html(data.month_invite);
						$('.invite_all_prift').html(data.invite_all);
						$('.register_time').html(data.info.add_time);
						$('.contactMask').show();
					}else{
		      			layer.msg('获取好友信息失败！');
					}
				})
				.fail(function() {
					layer.msg('获取好友信息失败！');
				})
			})

			//复制邀请码
		   	$('#copyOrderNum').on('click', function () {
			    var val = document.getElementById('_order_umber');
			    window.getSelection().selectAllChildren(val);
			    var copyCode = document.execCommand("Copy");

			    if (copyCode) {
			      layer.msg('复制成功');
			    } else {
			      layer.msg('复制失败');
			    }
			});
		   	var clickType = true;
			//输入邀请人id时触发
			$('#invitionNumber').on('input', function (e) {
				var value = $('#invitionNumber').val();
				$('.userInfo').addClass('hide');
				$('.bindButton').html('查询邀请人');
				clickType = true;
				if(value.length>0){
					$('.bindButton').addClass('haveInput');
				}else{
					$('.bindButton').removeClass('haveInput');
				}
			}); 
			//查询 - 绑定邀请人
			$('.bindButton').click(function(){
				var value = $('#invitionNumber').val();
				if(clickType == true){
					$.ajax({
						url: '/query_invite',
						type: 'POST',
						data: {invite_code: value},
					})
					.done(function(res) {
						if(res.code == 200){
							var data = res.data;
							clickType = false;
							$('.userInfo').removeClass('hide');
							$('.shareName').html(data.nickname);
							$('.shareImg').attr('src',data.logo);
							$('.bindButton').html('确认绑定');
						}else{
			      			layer.msg(res.msg);
						}
					})
					.fail(function() {
						layer.msg(res.msg);
					})
				}else{
					if(clickType == false){
						$.ajax({
							url: '/bind_invite',
							type: 'POST',
							data: {invite_code: value},
						})
						.done(function(res) {
							if(res.code == 200){
								var data = res.data;
								$('.bindInvitionMask').hide();
								layer.msg('绑定成功！')
								setTimeout(function(){
									location.reload();
								},600)
							}else{
								layer.msg(res.msg)
							}
						})
						.fail(function(res) {
							layer.msg(res.msg)
						})
					}
				}
			})
		    //上拉加载
		    var pageNum = 1;
			$(window).scroll(function () {
			    //滚动条滚动时调用
			    var scrollTop = $(this).scrollTop(); //计算已经卷进去滚动条的的高度
			    var scrollHeight = $(document).height(); //当前页面的总高度
			    var windowHeight = $(this).height(); //当前window的高度
			    if (scrollTop+3 + windowHeight >= scrollHeight) {
			    	$('.moreList').show();
			    	pageNum += 1;
				    $.ajax({
				      	url: '/my_team',
				      	type: 'post',
				      	data: {
				      		'page':pageNum,
				        	"type": {$type}||1,
				      	},
				      	success: function success(d) {
				      		if(d.code == 200){
					      		if(d.data){
					      			var htm = '';
					      			for(let i=0;i<d.data.list.length;i++){
					      				const item = d.data.list[i];
					      				htm += `
											<div class="team_item flex juscbtween">
												<div class="left flex alitemCenter">
													<img src="`+item.logo+`" alt="">
													<div class="user_aname">
														<div class="name"><i>`+item.nickname+`</i>
															<span>`+(item.grade==1?"普通用户":item.grade==2?"顾问":item.grade==3?"星级顾问":item.grade==4 ?"联合创始人":"错误状态")+`</span>
														</div>
														<p>`+item.add_time+`</p>
													</div>
												</div>
												<a href="javascript:;" class="flex alitemCenter contactFriend" data-id="`+item.member_id+`"><span>联系TA</span><img src="__TMPL__/home/public/assets/img/right.png" alt=""></a>
											</div>`;
					      			}
					      			console.log(123)
					      			$('.thisList').append(htm);
					      		}
				      		}
				      		$('.moreList').html('没有更多了')
				      	},
				      	error: function error(e) {
				        	console.log(e);
				      	}
				    })
			    }
			});
		})
	</script>
</html>
